<template>
  <div class="homepage">
    <div>
      <router-view></router-view>
    </div>
    <div class="zhssce">
      <div v-if="searchvalue">
        <van-field v-model="search" @keyup.enter="searchclick" placeholder="搜索" />
        <div class="zhssceer" @touchstart="searchclick">
          <span>搜索</span>
        </div>
      </div>
      <div v-if="!searchvalue">
        <van-field v-model="search" @touchstart="searchvalue=!searchvalue" placeholder="搜索" />
        <div class="zhssceer" @touchstart="searchvalue=!searchvalue">
          <span>搜索</span>
        </div>
      </div>
      <div class="nvimgsy" v-show="searchvalue">
        <van-row>
          <van-col span="12" @click="searchvalss(item)" v-for="(item,index) in searcharray" :key="index+'searcha'">
            <p class="searchalue">
              {{item}}
            </p>
          </van-col>
        </van-row>
      </div>
    </div>
    <div v-show="!searchvalue">
      <div class="nvimgsy">
        <van-row @click="change">
          <van-col span="6" @click="Myresume('Myresume')">
            <img src="../../assets/img/wdjl.png" />

            <p>我的简历</p>
          </van-col>
          <van-col span="6" @click="Myresume('Deliveryrecord')">
            <img src="../../assets/img/tdjlt.png" />
            <p>投递记录</p>
          </van-col>
          <van-col span="6" @click="Myresume('Mycollection')">
            <img src="../../assets/img/wdsc.png" />
            <p>我的收藏</p>
          </van-col>
          <van-col span="6" @click="Myresume('jobfair')">
            <img src="../../assets/img/zph.png" />
            <p>招聘会</p>
          </van-col>
        </van-row>
      </div>
      <div class="nvebarground"></div>
      <div class="nvebarzxzw">

        <span class="zwlbzxzw">最新职位</span>
        <span class="zwlbzxgd" @click="onClickRight">更多</span>
      </div>
      <div>
        <div class="zwlb fixt">
          <ul>
            <li v-for="(item,index) in list" @click="jobdetails(item.id,item.companyId,item.category)"
              :key="index+'zwlb'">
              <div class="zwlbnr">
                <p class="zwlbbt">
                  {{item.name}}
                  <span class="zwlbsj zwlbsjxz" style="color:red">{{item.wageText}}</span>
                </p>
                <p>
                  {{item.educationText?item.educationText:item.educationText===''?"不限":item.educationText}}
                  <span class="zwfg">|</span>
                  {{item.workExpText?item.workExpText:item.workExpText===''?"不限":item.workExpText}}
                </p>
                <p>
                  <span>{{item.companyName?item.companyName:""}}</span>
                  <span class="zwlbsj">{{item.refreshTime}}</span>
                </p>
              </div>

            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import POSITIONLIST from '@/api/PositionList'
import LOGIN from '@/api/login'
import timedate from '@/assets/js/datatime'
export default {
  data () {
    return {
      search: '',
      loading: false,
      searchvalue: false,
      searcharray: [],
      pageInfo: {
        page: 1,
        size: 20
      },
      list: []//职位列表存储
    }
  },
  computed: {},
  methods: {
    // 搜索跳转职位列表
    onClickRight () {
      this.$router.push({
        name: 'PositionList',
        query: {
          search: this.search
        }
      })
    },
    // 点击搜索跳转职位详情
    searchvalss (item) {
      this.search = item
      this.onClickRight()
    },
    // 显示搜索
    searchclick () {
      this.searchvalue = true
      // 获取本地搜索纪录
      let search = localStorage.getItem('search')
      console.log(search)
      if (search) {
        let searcharr = JSON.parse(search)
        // 如果大于等于5天，删除第一个，在添加一个
        if (searcharr.length === 5) {
          searcharr.splice(4, 1)
        }
        searcharr.unshift(this.search)
        localStorage.setItem('search', JSON.stringify(searcharr))
      } else {
        // 如果本地没有存储，给存储上
        search = []
        search.push(this.search)
        localStorage.setItem('search', JSON.stringify(search))
      }

      this.onClickRight()

      // this.positionList();
    },
    change (event) {
      console.log(event)
      console.log(1)
    },
    // 获取token
    loginToken (params) {
      let that = this
      sessionStorage.clear()
      LOGIN.logotoken(params).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          sessionStorage.setItem('token', res.headers['access-token'])
          sessionStorage.setItem('username', res.data.data.userName)
          that.positionList()
        }
      })
    },
    // 列表加载
    positionList () {
      let that = this
      let condition = [
        {
          column: 'company_job_name',
          type: '',
          value: that.search
        }, { 'column': 'status', 'type': 'eq', 'value': 1 },
        { column: 'include', type: '', value: 'D,CN' }
      ]
      let sort = [{ 'column': 'refresh_time', 'type': 'desc' }]
      var formData = new FormData()
      formData.append('page', this.pageInfo.page)
      formData.append('size', this.pageInfo.size)
      formData.append('condition', JSON.stringify(condition))
      formData.append('sort', JSON.stringify(sort))
      POSITIONLIST.jobListPage(formData).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          console.log(1)
          that.list = res.data.data.records
          for (let i = 0; i < that.list.length; i++) {
            that.list[i].refreshTime = timedate(that.list[i].refreshTime)
          }
        }
      })
    },
    // 进入详情页面
    jobdetails (id, companyId, category) {
      this.$router.push({
        name: 'Jobdetails',
        query: {
          id: id,
          companyId: companyId,
          category: category
        }
      })
    },
    // 跳转
    Myresume (name) {
      this.$router.push({
        name: name,
        query: {
          type: 80
        }
      })
    }

  },
  created () {
    // 判断是否有session_id，如果有就请求列表
    if (this.$route.query.session_id) {
      this.loginToken(this.$route.query.session_id)
      sessionStorage.setItem('session_id', this.$route.query.session_id)
    }

    // 判断本地存储是否存在搜索历史
    if (localStorage.getItem('search')) {
      this.searcharray = JSON.parse(localStorage.getItem('search'))
    }
  },
  mounted () {
    if (localStorage.getItem('token')) {
      this.positionList()
    }
  }
}
</script>
<style scoped>
.zwlb {
  margin-bottom: 1rem;
}
</style>
